<template>
  <div class="image-viewer-demo">
    <el-button type="primary" @click="showViewer = true">打开无遮罩预览</el-button>

    <!-- 图片预览组件 -->
    <el-image-viewer
      v-if="showViewer"
      :url-list="imageList"
      :z-index="3000"
      @close="showViewer = false"
    />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
  components: { ElImageViewer },
  data() {
    return {
      showViewer: false,
      imageList: [
        'https://picsum.photos/id/237/800/600',
        'https://picsum.photos/id/238/800/600'
      ]
    };
  }
};
</script>

<style scoped>
.image-viewer-demo {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* 核心：隐藏遮罩层 */
::v-deep .el-image-viewer__mask {
  /* 方式1：完全隐藏（推荐） */
  display: none;

  /* 方式2：透明化（保留占位但不可见）
  background-color: transparent !important;
  */
}

::v-deep .el-image-viewer__wrapper {
  z-index: -1;
}
</style>
